/* components */
import { 
  SettingGPTViewHeader,
  SettingGPTViewDialog,
  SettingGPTViewContent
} from "@src/modules/setting/gpt/components";
import SettingGPTQuestionViewTabs from '@src/modules/setting/gpt/views/question/tabs'
import SettingGPTQuestionViewOperate from '@src/modules/setting/gpt/views/question/operate'
import SettingGPTQuestionViewTable from '@src/modules/setting/gpt/views/question/table'
import SettingGPTQuestionViewEdit from '@src/modules/setting/gpt/views/question/edit'
/* enum */
import ComponentNameEnum from "@model/enum/ComponentNameEnum";
/* hooks */
import { useFetchSettingGPTAddQuestionToStandardLib, useSettingGPTQuestionList, useSettingListTable } from "@src/modules/setting/gpt/hooks";
/* model */
import { SettingGPTQuestionListFields, SettingGPTQuestionLogListFields } from "@src/modules/setting/gpt/model";
/* vue */
import { defineComponent, nextTick } from "vue";
/* scss */
import "@src/modules/setting/gpt/views/question/index.scss";
/* util */
import { settingListFieldsToColumns } from "@src/modules/setting/gpt/utils";
/* util */
import { getRootWindowInitData } from '@src/util/window'
import { isFalsy } from "@src/util/type";
/* types */
import { SettingGPTQuestionItemType } from "@src/modules/setting/gpt/types";
import Column from "@model/types/Column";
import { openTabForWikiCreate } from "@src/util/business/openTab";

type SettingGPTQuestionViewTableComponent = InstanceType<typeof SettingGPTQuestionViewTable>;
type SettingGPTViewDialogComponent = InstanceType<typeof SettingGPTViewDialog>;
type SettingGPTQuestionViewEditComponent = InstanceType<typeof SettingGPTQuestionViewEdit>;

export default defineComponent({
  name: ComponentNameEnum.SettingGPTQuestionView,
  props: {
  },
  setup(props, { emit }) {
    
    const {
      loading,
      dataList,
      page,
      active,
      status,
      isDisLikeActive,
      isLikeActive,
      isLogActive,
      isUnknownActive,
      isStandardActive,
      keyword,
      countMap,
      setActive,
      onKeywordChangeHandler,
      onTabChangeHandler,
      initialize,
      onRefreshHandler,
      onSetPageNumHandler,
      onSetPageSizeHandler,
      onDeleteQuestionHandler,
      onDeleteBatchQuestionHandler
    } = useSettingGPTQuestionList()
    
    const { 
      handleSelectionChange, 
      multipleSelection, 
      clearMultipleSelection 
    } = useSettingListTable<SettingGPTQuestionItemType>(emit)
    
    const {
      fetchAddQuestionToStandardLib,
      loading: fetchAddQuestionToStandardLibLoading
    } = useFetchSettingGPTAddQuestionToStandardLib()
    
    return {
      loading,
      dataList,
      page,
      active,
      status,
      keyword,
      isDisLikeActive,
      isLogActive,
      isLikeActive,
      isStandardActive,
      isUnknownActive,
      multipleSelection,
      countMap,
      fetchAddQuestionToStandardLibLoading,
      onRefreshHandler,
      fetchAddQuestionToStandardLib,
      clearMultipleSelection,
      handleSelectionChange,
      setActive,
      onKeywordChangeHandler,
      onTabChangeHandler,
      initialize,
      onSetPageNumHandler,
      onSetPageSizeHandler,
      onDeleteQuestionHandler,
      onDeleteBatchQuestionHandler
    }
    
  },
  data() {
    return {
      currentEditItem: {} as unknown as SettingGPTQuestionItemType
    }
  },
  computed: {
    attrs(): Record<string, any> {
      return {
        directives: [
          {
            name: 'loading',
            value: this.loading
          }
        ]
      }
    },
    columns(): Column[] {
      const fields = this.isLogActive ? SettingGPTQuestionLogListFields : SettingGPTQuestionListFields
      return settingListFieldsToColumns(fields)
    },
    loginUser(): Record<string, any> {
      const rootWindowInitData = getRootWindowInitData()
      return rootWindowInitData.user || {}
    },
    loginUserAuth(): Record<string, any> {
      return this.loginUser?.auth || {}
    },
    isShowDelete(): boolean {
      return Boolean(this.loginUserAuth?.XIAOBAO_WIKI_DEL) && isFalsy(this.isLogActive)
    },
    isAllowEdit(): boolean {
      return Boolean(this.loginUserAuth?.XIAOBAO_WIKI_EDIT)
    },
    isAllowCreate(): boolean {
      return Boolean(this.loginUserAuth?.XIAOBAO_WIKI_EDIT)
    },
    settingGPTQuestionViewTable(): SettingGPTQuestionViewTableComponent {
      return this.$refs.SettingGPTQuestionViewTable as SettingGPTQuestionViewTableComponent
    },
    settingGPTViewDialog(): SettingGPTViewDialogComponent {
      return this.$refs.SettingGPTViewDialog as SettingGPTViewDialogComponent
    },
    settingGPTQuestionViewEdit(): SettingGPTQuestionViewEditComponent {
      return this.$refs.SettingGPTQuestionViewEdit as SettingGPTQuestionViewEditComponent
    }
  },
  mounted() {
    this.initialize()
  },
  methods: {
    openDialog() {
      this.settingGPTViewDialog.open()
    },
    closeDialog() {
      this.settingGPTViewDialog.close()
    },
    onAddAnswerHandler(item: SettingGPTQuestionItemType) {
      
      this.currentEditItem = item
      this.openDialog()
      
      this.$nextTick(() => {
        this.settingGPTQuestionViewEdit.outsideInitialize(this.currentEditItem as unknown as SettingGPTQuestionItemType)
      })
      
    },
    onAddWikiHandler(item: SettingGPTQuestionItemType) {
      openTabForWikiCreate({
        questionId: item.id,
      } as any)
    },
    async onAddAnswerConfirmHandler() {
      
      const validate = await this.settingGPTQuestionViewEdit.validate()
      
      if (isFalsy(validate)) {
        return
      }
      
      const value = this.settingGPTQuestionViewEdit.getInsideValue()
      const params = {
        id: this.currentEditItem.id,
        question: value.question,
        answer: value.answer,
        similarQuestions: value.similarQuestionList,
        applyRobotIds: value.applyRobotList
      }
      
      this.fetchAddQuestionToStandardLib(params).then((isSuccess) => {
        
        if (isFalsy(isSuccess)) {
          return
        }
        
        this.closeDialog()
        this.onRefreshHandler()
        
      })
      
    },
    insideOnDeleteBatchQuestionHandler() {
      this.onDeleteBatchQuestionHandler(this.multipleSelection).then(() => {
        nextTick(() => {
          this.clearMultipleSelection()
          this.settingGPTQuestionViewTable.clearSelection()
          this.settingGPTQuestionViewTable.rerender()
        })
      })
    }
  },
  render() {
    return (
      <div class={ComponentNameEnum.SettingGPTQuestionView}>
        
        <SettingGPTViewContent>
          
          <SettingGPTQuestionViewTabs
            value={this.active}
            countMap={this.countMap}
            onInput={this.onTabChangeHandler}
          >
          </SettingGPTQuestionViewTabs>
          
          <SettingGPTQuestionViewOperate
            keyword={this.keyword}
            isShowDelete={this.isShowDelete}
            isStandardActive={this.isStandardActive}
            isLogActive={this.isLogActive}
            isLikeActive={this.isLikeActive}
            onChangeKeyword={this.onKeywordChangeHandler}
            onBatchDelete={this.insideOnDeleteBatchQuestionHandler}
          >
          </SettingGPTQuestionViewOperate>
          
          <SettingGPTQuestionViewTable
            ref="SettingGPTQuestionViewTable"
            {...this.attrs}
            columns={this.columns}
            page={this.page}
            value={this.dataList}
            active={this.active}
            isAllowEdit={this.isAllowEdit}
            isAllowCreate={this.isAllowCreate}
            isShowDelete={this.isShowDelete}
            onChangeSelection={this.handleSelectionChange}
            onChangePageNum={this.onSetPageNumHandler}
            onChangePageSize={this.onSetPageSizeHandler}
            onDelete={this.onDeleteQuestionHandler}
            onAddAnswer={this.onAddAnswerHandler}
            onAddWiki={this.onAddWikiHandler}
          >
          </SettingGPTQuestionViewTable>
          
          <SettingGPTViewDialog
            title="添加至应用百科"
            ref="SettingGPTViewDialog"
            disabled={this.fetchAddQuestionToStandardLibLoading}
            onConfirm={this.onAddAnswerConfirmHandler}
          >
            <SettingGPTQuestionViewEdit
              ref="SettingGPTQuestionViewEdit"
              isAdd
              value={this.currentEditItem as unknown as SettingGPTQuestionItemType}
            >
            </SettingGPTQuestionViewEdit>
          </SettingGPTViewDialog>
          
        </SettingGPTViewContent>
        
      </div>
    )
  }
});